<template>
  <div class="article-edit">
    <el-card class="!border-none" shadow="never">
      <el-page-header :content="$route.meta.title" @back="$router.back()" />
    </el-card>
    <el-card class="mt-4 !border-none" shadow="never">
      <el-form ref="formRef" :model="formData" :rules="rules" class="ls-form" label-width="85px">
        <div class="xl:flex">
          <div>
            <el-form-item label="门店照片" prop="trademark">
              <div>
                <div style="display:flex; width: 500px;">
                  <bolck v-for="(item,index) in formData.trademark" :key="index" >
					  <material-picker v-model="item.img" :limit="1" style="width:200rpx"/>
				  </bolck>
                </div>
				<el-button type="primary" @click="addimg">添加图片</el-button>
				<el-button type="danger" @click="delimg">删除图片</el-button>
                <div class="form-tips">建议尺寸：</div>
              </div>
            </el-form-item>
            <el-form-item label="企业名字" prop="name">
              <div class="w-80">
                <el-input v-model="formData.name" placeholder="请输入企业名字" />
              </div>
            </el-form-item>
			<el-form-item label="企业类型" prop="leixing">
			  <div class="w-80">
			     <el-select
			        v-model="formData.leixing"
			        class="m-2"
			        placeholder="请选择企业类型"
			        style="width: 310px"
			      >
			        <el-option
			          v-for="item in options"
			          :key="item.value"
			          :label="item.label"
			          :value="item.value"
			        />
			      </el-select>
			  </div>
			</el-form-item>
            <el-form-item label="企业介绍" prop="introduce">
              <div class="w-80">
				   <el-input
				      v-model="formData.introduce"
				      type="textarea"
				      placeholder="请输入企业介绍"
					  :autosize="{ minRows: 2, maxRows: 6 }"
				    />
              </div>
            </el-form-item>
            <el-form-item label="联系人" prop="contacts">
              <div class="w-80">
                <el-input v-model="formData.contacts" placeholder="请输入企业联系人" />
              </div>
            </el-form-item>
			<el-form-item label="联系电话" prop="phone">
			  <div class="w-80">
			    <el-input v-model="formData.phone" placeholder="请输入企业联系人电话" />
			  </div>
			</el-form-item>
			<el-form-item label="联系地址" prop="address">
              <div class="w-80">
                <el-input v-model="formData.address" placeholder="请输入企业联系地址" />
              </div>
            </el-form-item>
            <el-form-item label="排序" prop="number_w">
              <div class="w-80">
                <el-input v-model="formData.sort" placeholder="排序字段" />
              </div>
            </el-form-item>
          </div>

        </div>
      </el-form>
    </el-card>
    <footer-btns>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </footer-btns>
  </div>
</template>

<script lang="ts" name="articleListsEdit" setup>
import type { FormInstance } from "element-plus";
import { useDictOptions } from "@/hooks/useDictOptions";
import { enterpriseAdd, enterpriseEdit, enterpriseDetail } from "@/api/article";
import useMultipleTabs from "@/hooks/useMultipleTabs";

const route = useRoute();
const router = useRouter();
const formData = reactive({
  id: "",
  contacts: "", //联系人
  introduce: "",//企业介绍
  content: "",
  trademark: [
	  {img:0}
  ],//门店照片
  sort: 0,
  name:"", //企业名称
  leixing:'', //企业类型
  phone:null, //联系电话
  address:''  //联系地址
});

const options = [
  {
    value: '0',
    label: '小微企业',
  },
  {
    value: '1',
    label: '一般纳税人',
  }
]

const addimg=()=>{
	formData.trademark.push({
		img:0
	})
}
const delimg=()=>{
	if(formData.trademark.length==1){
		return 
	}else{
		formData.trademark.pop()
	}
}

	const rules = reactive({
		trademark: [{ required: true, message: '请添加门店照片', trigger: 'blur' }],
		name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
		leixing: [{ required: true, message: '请选择企业类型', trigger: 'blur' }],
		introduce: [{ required: true, message: '请输入企业介绍', trigger: 'blur' }],
		phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
		address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
		contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],

	})
const { removeTab } = useMultipleTabs();
const formRef = shallowRef<FormInstance>();


const getDetails = async () => {
  const data = await enterpriseDetail({
    id: route.query.id
  });
  console.log(data, "qdata");
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key];
  });
  console.log(formData);
  formData.trademark=JSON.parse(formData.trademark)
};


const handleSave = async () => {
  await formRef.value?.validate();
  if (route.query.id) {
    await enterpriseEdit(formData);
  } else {
    await enterpriseAdd(formData);
  }
  removeTab();
  router.back();
};

route.query.id && getDetails();
</script>
